import React,{Component,View,StyleSheet,Text,ListView,LayoutAnimation,UIManager } from 'react-native';
import Bw from './bw';

//为了通过scroll的监听确定，当前页面显示到哪里，需要明确listview里面的节头高度，和每一个list的高度
const SECTION_HEAD_HIGHT=30;//节头的高度
const LIST_HIGHT=80;//每一个list的高度


export default class bwlist extends Component {
  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({
      sectionHeaderHasChanged: (r1, r2) => r1 !== r2,
      rowHasChanged: (r1, r2) => r1 !== r2
    });
    // var data={
    //     一线分娩1:[{},{},{},{},{},{},{},{},{},{}],
    //     一线分娩2:[{},{},{},{},{},{},{},{},{},{}],
    //     一线分娩3:[{},{},{},{},{},{},{},{},{},{}],
    // };
    var data=this.props.reduxbwlist
    var sectionID=this.getObjectkey(data);
    //LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    this.state={
      sectionID:sectionID,
      dataSource: ds.cloneWithRowsAndSections(data, sectionID),
      //section的位置信息
      sectionPostion:this.calSectionScrollPostion(data, sectionID,SECTION_HEAD_HIGHT,LIST_HIGHT)
    }
  }
  /*得到对象的key数组*/
  getObjectkey(ob){
    var result=[];
    for(var key in ob){
      result.push(key)
    };
    return result;
  }
  /*根据确定的节头高度，list高度，计算出每一段节头属于的scroll位置
    //    var data={
    //     A:['高','梁','南','奉','大','高','梁','南','奉','大'],
    //     B:['高','梁','南','奉','大','高','梁','南','奉','大']
    //    };
    //    var sectionID=['A','B'];
          sectionHight section头的高度  const SECTION_HEAD_HIGHT=100;
          listHight list的高度 const LIST_HIGHT=80
    返回 [0, 820, 1640, 2460]代表scroll在哪里是第几个section
  */
  calSectionScrollPostion(data,sectionID,sectionHight,listHight){
    var result=[];
    result.push(0);//第一个section在0的位置
    for (var sec in data) {
      //console.log(data[sec]);
      var sectionlong=data[sec].length*listHight+sectionHight;
      //最后一个值再加上这个section的长度
      result.push(result[result.length-1]+sectionlong);
    };
    return result;
  }
  //单击进入bwlist
  onSelect=()=>{
    this.props.navigator.push({
      name: 'bwList'
    });
  };
  //渲染组头
  renderSectionHeader(sectionData,sectionID){
    return (
      <View style={styles.sectionHeader}>
        <Text style={styles.sectionHeaderText}>{sectionID}</Text>
      </View>
    );
  };
  //滚动监听事件
  onScroll=(event)=>{
    //console.log('当前位置'+event.nativeEvent.contentOffset.y);
    for (var i = 0; i < this.state.sectionPostion.length-1; i++) {
      //判断在哪个setion中
      if (this.state.sectionPostion[i]<=event.nativeEvent.contentOffset.y && event.nativeEvent.contentOffset.y<=this.state.sectionPostion[i+1]) {
        //如果topbar的farmunit和section里面的不一样，通过redux改变
        if (this.props.reduxFarmunit!=this.state.sectionID[i]) {
          this.props.reduxChangeFarmunit(this.state.sectionID[i]);
        };
        //this.props.reduxChangeFarmunit(i);
        break;//已经找到在那个头里面了，不用再判断
      };
    };
  };
  render() {
    //console.log(this.state.sectionPostion);
    //var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return (
      <ListView
        style={styles.contain}
        automaticallyAdjustContentInsets={false}
        //dataSource={ds.cloneWithRows(this.state.dataSource)}
        dataSource={this.state.dataSource}
        onScroll  ={this.onScroll}
        renderSectionHeader={this.renderSectionHeader}
        renderRow={(rowData,sec,index) => <Bw
                                            secName={sec}
                                            reduxEnterFarmunit={this.props.reduxEnterFarmunit}
                                            LIST_HIGHT={LIST_HIGHT}
                                            navigator={this.props.navigator}
                                            rowData={rowData} 
                                            index={index}>
                                          </Bw>} 
        //renderHeader={(e)=>this._renderHeader(e)}
      />
        
    );
  }
}

const styles = StyleSheet.create({
  contain:{
    flex:1,
    //backgroundColor:'red',

  },
  sectionHeader: {
    height:SECTION_HEAD_HIGHT,
    backgroundColor: '#48D1CC',
    paddingLeft: 30,
    justifyContent:'center',

  },
  sectionHeaderText: {
    fontFamily: 'AvenirNext-Medium',
    fontSize: 16,
    color: 'white',
    paddingLeft: 10
  },
});